<template>
    <div style="height: 300px;background-color: #001935;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 50px 0;">
      <div style="width: 1200px;display: flex;justify-content: space-between;">
        <div>
            <div style="color: #f0feff;">网站导航</div>
            <div style="margin-top: 10px;">
                <!-- <div style="display: flex;">
                    <div style="color: #95adc2;font-size: 12px;width: 100px;">首页</div>
                    <div style="color: #95adc2;font-size: 12px;width: 100px;">关于我们</div>
                </div> -->
                <div style="display: flex;flex-wrap: wrap;width: 200px;">
                    <div style="color: #95adc2;font-size: 12px;width: 100px;margin-top: 10px;cursor: pointer;" v-for="(item,index) in nav" @click="toLink(item)">{{ item.navigationName }}</div>
                    <!-- <div style="color: #95adc2;font-size: 12px;width: 100px;">新闻动态</div> -->
                </div>
                <!-- <div style="display: flex;margin-top: 10px;">
                    <div style="color: #95adc2;font-size: 12px;width: 100px;">客户案例</div>
                    <div style="color: #95adc2;font-size: 12px;width: 100px;">联系我们</div>
                </div> -->
            </div>
        </div>
        <div>
            <div style="color: #f0feff;">{{ companyInfo.companyName }}</div>
            <div style="margin-top: 20px;">
                <div style="color: #95adc2;font-size: 12px;">
                    <el-icon color="#f2ffff"><LocationFilled /></el-icon>
                    <span style="margin-left: 10px;">{{ companyInfo.companyAddress }}</span>
                </div>
                <div style="color: #95adc2;font-size: 12px;margin-top: 10px;">
                    <el-icon color="#f2ffff"><Message /></el-icon>
                    <span style="margin-left: 10px;">{{ companyInfo.email }}</span>
                </div>
                <div style="color: #95adc2;font-size: 12px;margin-top: 10px;">
                    <el-icon color="#f2ffff"><PhoneFilled /></el-icon>
                    <span style="margin-left: 10px;">{{ companyInfo.contactWayOne }}</span>
                </div>
            </div>
        </div>
        <div>
            <!-- <div style="color: #f0feff;">联系我们</div>
            <div style="margin-top: 20px;">
                <div style="color: #95adc2;font-size: 12px;">请输入您的联系方式，我们将会联系您</div>
                <div style="margin-top: 20px;">
                    <el-input v-model="Form.userPhone" style="width: 210px" placeholder="请输入您的联系方式" />
                </div>
                <div style="margin-top: 20px;">
                    <el-button type="primary" style="font-size: 12px;width: 100px;" @click="submit">提交</el-button>
                </div>
            </div> -->
        </div>
      </div>
      <div style="margin-top: 30px;">
        <!-- Copyright 2022 Real villa All Rights Reserved -->
        <!-- {{ companyInfo.recordInformation }} -->
        <el-link :href="companyInfo.recordInformationUrl" target="_blank" style="color: #95adc2;font-size: 12px;">{{ companyInfo.recordInformation }}</el-link>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
    import { onMounted,ref,watch } from 'vue'
    import { useRouter, useRoute } from "vue-router";
    import { $CompanyInfo,$NavigationList,$AddUser } from '../api/api'
    const router = useRouter();
    const Form = ref({})
    let companyInfo = ref({})
    let nav = ref([])

    onMounted(()=>{
        loadCompanyInfo()
        loadNavigationList()
    })

    const submit = async ()=>{
      let ret = await $AddUser(Form.value)
      console.log(ret)
      if(ret.code==0){
        Form.value = {}
      }
    }

    const loadNavigationList = async ()=>{
      let ret = await $NavigationList()
      console.log(ret)
      nav.value = ret.rows
    }

    const loadCompanyInfo = async ()=>{
      let ret = await $CompanyInfo()
      console.log(ret)
      companyInfo.value = ret.rows
      console.log('companyInfo',companyInfo.value)
    //   nav.value = ret.rows
    }

    const toLink = async (item)=>{
        console.log(item)
        router.push(item.url)
    }
  </script>
  
  <style scoped>
  
  </style>